<template>
	<div class="devtool-gentable-container">
		<el-dialog title="代码预览" v-model="isShowDialog" width="65%">
			<el-tabs v-model="active" tab-position="left">
				<el-tab-pane v-for="(value, key) in formData.data" :label="key" :name="key" :key="key">
					<div class="pre-code">
						<pre>{{value}}</pre>
					</div>
				</el-tab-pane>
			</el-tabs>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
export default {
	name: 'devtool/gentable/code',
	setup() {
		const state = reactive({
			isShowDialog: false,
			active: 'entity.java.vm',
			formData: {},
		});

		// 打开弹窗
		const openDialog = (row?: object) => {
			state.isShowDialog = true;
			state.formData = Object.assign({}, row);
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		return {
			openDialog,
			closeDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>
<style>
	.devtool-gentable-container .pre-code{
		background-color: #606266;
		color: #FFFFFF;
		padding: 15px;
		overflow-x: auto;
	}
</style>

